<template>
  <div class="home">
    <!-- <el-row>
      <el-col :span="7">
        <label>分类:
          <el-input class="search-input" size="small" v-model="searchForm.archDeptClassName" placeholder="请输入"></el-input>
        </label>
      </el-col>
      <el-col :span="7">
        <label>标题:
          <el-input class="search-input" v-model="searchForm.archTitle" placeholder="请输入"></el-input>
        </label>
      </el-col>
      <el-col :span="7">
        <label>部门:
          <el-select class="search-input" v-model="searchForm.delivUnit" size="small" placeholder="请选择">
            <el-option label="label" value="value"></el-option>
          </el-select>
        </label>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" icon="el-icon-search" circle @click="handleAddStaff()"></el-button>
      </el-col>
    </el-row> -->
    <label>借阅天数:
      <el-input
        v-model="during"
        class="input"
        type="text"
        oninput="this.value = this.value.replace(/[^0-9]/g, '');"
        placeholder="请输入借阅天数"
      />
    </label>
    <div class="table">
      <el-table
        v-loading="isLoading"
        border
        :data="listData"
        style="width: 100%"
        highlight-current-row
        @row-click="handleSelect"
      >
        <!-- <el-table-column type="selection" width="55" label="选择"></el-table-column>  -->
        <el-table-column align="center" label="" width="40">
          <template scope="scope">
            <el-radio
              v-model="currentRow"
              :label="scope.row"
              class="select-radio"
              @change.native="handleSelect(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="archTitle" label="标题名" />
        <el-table-column align="center" prop="archMainCode" label="档案编号" />
        <el-table-column align="center" prop="visitCount" label="浏览次数" />
        <el-table-column align="center" prop="borrowCount" label="借阅次数" />
        <el-table-column align="center" prop="notes" label="备注" />
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        :current-page.sync="page.pageNum"
        :page-sizes="[10, 20, 50]"
        :page-size="page.pageSize"
        layout="sizes, total, prev, pager, next"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div style="text-align: center">
      <el-button
        type="primary"
        class="submit-button"
        @click="submit()"
      >提 交</el-button>
      <el-button class="submit-button" @click="goBack()">返 回</el-button>
    </div>
  </div>
</template>

<script>
import { qryAllArchMain } from '@/api/archManage'
import { addArchApplication } from '@/api/archApplication'
export default {
  data() {
    return {
      isLoading: false,
      userInfo: {},
      searchForm: {
        archDeptClassName: '',
        archMainCode: '',
        archTitle: '',
        delivUnit: '',
        archPeriod: '',
        archRequireOther: '',
        archState: '',
        auditors: '',
        accessState: '',
        notes: ''
      },
      listData: [],
      currentRow: {},
      during: '', // 借阅天数
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.getData()
  },
  methods: {
    // 获取列表数据
    getData() {
      this.isLoading = true
      const { pageNum, pageSize } = this.page
      const param = {
        pageNum: pageNum,
        pageSize: pageSize
      }
      qryAllArchMain(param)
        .then((res) => {
          if (res.code === '0') {
            this.listData = res.data.records
          }
        })
        .finally(() => {
          this.isLoading = false
        })
    },

    submit() {
      if (!this.during || !parseInt(this.during)) {
        this.$message({
          message: '请输入借阅天数',
          type: 'warning'
        })
        return
      }

      const param = {
        during: this.during,
        staffCode4App: this.userInfo.username
          ? this.userInfo.username
          : this.userInfo.staffCode,
        appState: 0,
        archMainId: this.currentRow.archMainCode
      }
      addArchApplication(param).then((res) => {
        if (res.code === '0') {
          this.$message({
            message: '录入成功',
            type: 'success'
          })
          this.goBack()
        }
      })
    },
    goBack() {
      this.$router.back()
    },

    handleSelect(val) {
      console.log(val)
      this.currentRow = val
    },

    handleSizeChange(val) {
      this.page.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getData()
    }
  }
}
</script>

<style scoped>
.home {
  margin: 20px;
}

.select-radio {
  color: #fff;
  padding-left: 10px;
  margin-right: -25px;
}

.table {
  height: 80%;
}

.pagination {
  width: auto;
  display: flex;
  margin-top: 10px;
  align-items: center;
}

.input {
  width: 40vw;
}
</style>
